<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="userVisible"
      :width="handleScreenWidthToVw(574)+'px'"
      :modal-append-to-body="false"
      :before-close="_handleCancelClick"
    >
      <div class="justify-between user-subtitle">
        <span>已添加用户数:</span>
        <span>当前选中:</span>
      </div>
      <SelectUser
        ref="selectUserList"
        class="select-user"
        :selected-users-list="selectedUsersList"
        :is-multi-select="isMultiSelect"
      />
      <span slot="footer" class="dialog-footer">
        <SubButton title="确定" @subClick="_handleSubClick" />
        <CancelButton @cancelClick="_handleCancelClick" />
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SubButton from '../sub-button/index.vue'
import CancelButton from '../cancel-button/index.vue'
import SelectUser from '../select-user/index.vue'
import { handleScreenWidthToVw } from '../../utils/tools'
export default {
  name: 'UserSelector',
  components: { SubButton, CancelButton, SelectUser },
  props: {
    isMultiSelect: { type: Boolean, default: true },
    userVisible: { type: Boolean, default: false },
    dialogTitle: { type: String, default: '添加用户' },
    selectedUsersList: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {}
  },
  computed: {
    handleScreenWidthToVw() {
      return handleScreenWidthToVw
    },
  },
  methods: {
    getUsersList() {
      return this.$refs.selectUserList.getSelectedUsersList()
    },
    getUser() {
      return this.$refs.selectUserList.getselectedUser()
    },
    _handleSubClick() {
      const selectedUserData = this.isMultiSelect
        ? this.$refs.selectUserList.getSelectedUsersList()
        : this.$refs.selectUserList.getselectedUser()

      this.$emit('confirmClick', selectedUserData)
    },
    _handleCancelClick() {
      this.$emit('cancelClick')
    },
  },
}
</script>

<style lang="scss" scoped>
.user-subtitle {
  padding-right: 20%;
  padding-bottom: vh(14px);
  padding-left: 10%;
  font-size: vw(16px);
  border-bottom: 1px solid #ccc;
}

.select-user {
  margin: vh(9px) vw(20px);
}

::v-deep {
  .el-dialog__body {
    padding: 0;
  }

  .el-dialog__footer {
    text-align: center;
  }
}
</style>
